<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="favicon.ico" rel="shortcut icon">

</head>

<body>
    <ul id="posts"></ul>
    <script>
        /* const data= */fetch('http://localhost:3000/yxf')
            .then(data => data.json())
            .then(data => { console.log(data) }
            )

        const xhr = new XMLHttpRequest()
        xhr.open("GET", 'http://localhost:3000/yxf', true)
        xhr.send()
        xhr.addEventListener('readystatechange', (event) => {
            console.log(event);
            if (event.target.readyState === 4) {
                console.log(event.target.responseText);
                document.getElementById('posts').innerHTML =
                    JSON.parse(event.target.responseText).map(item =>
                        `<li>
                            ${item.name} ${item.age}
                        </li>`
                    );

            }
        })

    </script>
</body>

</html>